<template>
  <div class="SiteRent-container">

    <el-card>
      <el-form>

        <template>
          <!-- 头部搜索和按钮 -->
          <el-input
            v-model="keyWords"
            prefix-icon="el-icon-search"
            placeholder="停车场、小区名搜索"
            style="width:200px"
            size="small"
            class="inputs"
          />
          <el-button icon="el-icon-search" size="small" type="primary" @click="search(keyWords)">搜索</el-button>
          <el-button size="small" type="danger">批量删除</el-button>
          <el-button size="small" type="warning" @click="butnAdd">增加</el-button>
        </template>
      </el-form>
      <!-- 小区内容 -->

      <el-table

        border
        :data="list"
        class="tables"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column label="小区" prop="name" align="center" />
        <el-table-column label="车位数" prop="carportNo" align="center" >
          <template v-slot="{row}">
            {{row.carportNo.length}}
          </template>
        </el-table-column>
        <el-table-column label="车位区号" prop="sections" align="center" >
          <template v-slot="{row}">
            {{row.sections.join(",")}}
          </template>
        </el-table-column>
          
        <el-table-column label="操作" align="center">
          <template v-slot="{row}">
            <el-button type="danger" size="small" @click="deleteCarportById(row.id)">删除</el-button>
            <el-button type="success" size="small" @click="revise(row.id)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹层 -->
      <el-dialog title="增加信息" :visible="showDialog" @close="btnCanel">
        <el-form ref="from" label-width="120px" :model="fromData" :rules="rules">
         <el-form-item label="停车编号:" prop="number">
            <el-select 
            v-model="fromData.number"
             style="width:260px"
              placeholder="请选择小区"
             
              >
              <el-option 
               v-for="item in fromDatas" 
               :key="item.id" 
               :label="item"
               :value="item" >
                
              </el-option>
              
            </el-select>
          </el-form-item>
          <el-form-item label="绑定小区:" prop="binds">
            <el-select v-model="fromData.binds" style="width:260px" placeholder="请选择小区">
              <el-option
               :label="comm.communityName"
               :value="comm.communityName" 
               v-for=" comm in community" :key="comm.id"
               />
             
            </el-select>
          </el-form-item>
          <el-form-item label="车位数:" prop="carsNumber">
            <el-select v-model="fromData.carsNumber" style="width:260px" multiple placeholder="请选择车号">
              <el-option
                v-for="item in options"
                :key="item.index"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="车位区号:" prop="carsOurs">
            <el-select v-model="fromData.carsOurs" style="width:260px" multiple placeholder="请选择区号">
              <el-option
                v-for="item in options1"
                :key="item.index"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
        </el-form>

        <!-- 放置footer插槽 -->
        <el-row type="flex" justify="center">
          <el-col :span="8">
            <!-- 确定按钮 -->
            <el-button type="primary" @click="btnOK">确定</el-button>
            <!-- 取消按钮关闭弹层 -->
            <el-button @click="btnCanel">取消</el-button>
          </el-col>
        </el-row>
      </el-dialog>

      <!-- 修改弹窗 -->
      <el-dialog
        :visible="showPidlog"
     
        center
        @close="btncancel"
      >
        <el-form ref="from" label-width="120px" type="flex" justify="center">
          <el-form-item label="绑定小区:" prop="binds">
            <el-select v-model="fromData.binds" style="width:260px" placeholder="请选择小区">
              <el-option
               :label="comm.communityName"
               :value="comm.communityName" 
                v-for=" comm in community" :key="comm.id"    
               />
             
            </el-select>
          </el-form-item>
          <el-form-item label="车位数:" prop="carsNumber">
            <el-select v-model="fromData.carsNumber" style="width:260px" multiple placeholder="请选择车号">
              <el-option
                v-for="item in options"
                :key="item.index"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="车位区号:" prop="carsOurs">
            <el-select v-model="fromData.carsOurs" style="width:260px" multiple placeholder="请选择区号">
              <el-option
                v-for="item in options1"
                :key="item.index"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template type="flex" justify="center">
        <el-button size="small" @click="btnok">确认</el-button>
        <el-button size="small" @click="btncancel">取消</el-button>
        </template>
      
      </el-dialog>

      <!-- 分页内容 -->
      <div class="block">

        <el-pagination

          :page-sizes="[5, 10, 50, 100,200]"
          :page-size="5"

          layout="total, sizes, prev, pager, next, jumper"
          :total="200"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog
      :visible="showdellog"
      width="500px"
      @close="btncancel1"
    >
      <div class="juzho">确认删除该数据吗</div>
      <!-- 放置footer插槽 -->
      <el-row type="flex" justify="end">
        <el-col>
          <!-- 确定按钮 -->
          <el-button type="primary" size="mini" @click="btnok1">确定</el-button>
          <!-- 取消按钮关闭弹层 -->
          <el-button size="mini" @click="btncancel1">取消</el-button>
        </el-col>
      </el-row>

    </el-dialog>
  </div>
</template>

<script>
// getAllParkingId停车场编号

import { getAllCarPort,getAllParkingId,getAllParkingName ,deleteCarportById,updateCard} from '@/api/carpaking'
export default {
  data() {
    return {
      // 初始化数据
      list: [],
      // {
      //   name:'',
      //   carportNo:"",
      //   sections:''
      // }
      keyWords: '', // 搜索关键字
      // currentPage4: 1,
      // 区号循环数组
      options: [{
        value: '选项1',
        label: '001'
      }, {
        value: '选项2',
        label: '002'
      }, {
        value: '选项3',
        label: '003'
      }, {
        value: '选项4',
        label: '004'
      }, {
        value: '选项5',
        label: '005'
      }],
      options1: [{
        value: '选项1',
        label: 'CA'
      }, {
        value: '选项2',
        label: 'CB'
      }, {
        value: '选项3',
        label: 'CC'
      }, {
        value: '选项4',
        label: 'CD'
      }, {
        value: '选项5',
        label: 'CE'
      }, {
        value: '选项6',
        label: 'CF'
      }, {
        value: '选项7',
        label: 'CG'
      }],
      value1: [],
      value2: [],
      arr: [],
     fromDatas:[],
    //  数据绑定 表单校验
      fromData: {
        number:'',
        // 绑定小区
        binds: '',
        // 车位数
        carsNumber: '',
        // 车位区号
         carsOurs: ''
      },
      // 绑定小区
      community:[],
      rules: {
        number: [{ required: true, message: '停车编号不能为空', trigger: 'blur' }],
        binds: [{ required: true, message: '小区名字不能为空', trigger: 'blur' }],
        carsNumber: [{ required: true, message: '车位数不能为空', trigger: 'blur' }],
        carsOurs: [{ required: true, message: '车位区号不能为空', trigger: 'blur' }]
      },
      // 大弹窗
      showDialog: false,
      // 修改弹窗
      showPidlog: false,
      //  删除弹窗
      showdellog: false,
      // app: []
    }
  },

   created() {
    // 所有数据
   this.getAllCarPort()
  // 小区编号
   this.getAllParkingId()
  //  绑定小区接口
   this. getAllParkingName()
  
 

  },
  methods: {
    // ...mapMutations(['saveToken']),
    // 车位数
  async getAllCarPort(){

  //  try{
   this.list= await getAllCarPort({
      info: '',
      pageIndex: 1, // 页数
      comId: 0
      
   }
   )
  //  const carPort={...this.list}
  //  console.log(carPort[0].sections);
  //  carPort[0].sections.join(',')
  //  }catch(error){
  //  console.log(error);
  //  }
  
    // console.log(this.list)
    // console.log(this.list[0].carportNo)
    },

    // 点击搜索
    search(keyWords) { // 根据关键字进行数据的查询
      return this.list.forEach(item => {
        if (item.name.includes(keyWords)) {
          return item
        }
        // console.log(item.name.includes(keyWords))
      })
    },
    // 绑定小区
   async getAllParkingName(){
    
    //  try{
       this.community= await getAllParkingName()
       

   
    },
    // 停车编号id
    async getAllParkingId(){
     this.fromDatas= await getAllParkingId({
      })
    },

    // 搜索

    // 每页多少条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 增加按钮
    butnAdd() {
      this.showDialog = true// 弹出弹层
    },
    // 取消按钮 关闭弹窗
    btnCanel() {
      this.fromData = {
        // 小区编号
        number: '',
        // 绑定小区
        binds: '',
        // 车位编号
        carsNumber: '',
        // 车位区号
        carsOurs: ''
      }
      this.showDialog = false
    },
    // 确认按钮(新增)
    async btnOK() {
      
      console.log(this.fromData);
      try {
        // 表单验证
        await this.$refs.from.validate()

        var indexs = {
        number:this.fromData.number, name:this.fromData.binds, carportNo: this.fromData.carsNumber, sections: this.fromData.carsOurs
        }

        // indexs.sections = indexs.sections.join(',')
        // console.log(index.total.join(','));;  0
        this.list.push(indexs)
        
        // 校验成功提示
        this.$message.success('添加成功')
        // console.log(this.fromData.binds)
        // this.fromData = this.list

        // console.log(this.fromData)
        this.showDialog = false
      } catch (error) {
        console.log(error)
      }

      //  重置校验
      // await this.$refs.from.resetFields()
    },
    // ...mapMutations(['saveToken']),
    // 删除按钮
    async deleteCarportById(id) {
     this.showDialog=true
     try{
      await this.$confirm('确认删除该数据吗')
      // 调用接口删除
      await deleteCarportById([id])
      // this.getAllCarPort()
      // 数据初始化
      this.getAllCarPort()
      this.$message.success('删除数据成功')
     
     }catch(error){
      console.log(error);
     }
    // this.showdellog=true
    },
    // 修改按钮
    async revise() {
      this.showPidlog = true
      
      
        // {number:this.fromData.number,
       
        // // 绑定小区
        // binds:this.fromData.binds,
        // // 车位数
        //  carsNumber:this.fromData.carsNumber,
        // // 车位区号
        //   carsOurs:this.fromData.carsOurs}
      
      // console.log(this.fromData)
    
    },
    // 弹窗确认
    btnok() {
      this.showPidlog = false
    },
    // 弹窗取消
    btncancel() {
      this.showPidlog = false
    },
    // 弹窗确认(删除)
   async btnok1() {
      //   找到对应的索引 方法带id参数
      // const index = this.list.filter((item) => {
      //   // 如果索引对上了
      //   // 调用点击按钮的id赋值给this.id
      //   this.id = this.delet(id)
        
      //   if (item.id === this.id) {
      //     // 返回成功
      //     return true
      //   }
      //   console.log(item.id);
      // })
     
      //   删除找到的对应索引 一个值
    //  try{
    // await deleteCarportById([id])
      this.showdellog = false
    //  }catch(error){
    //   console.log(error);
    //  }
    
    },
    // 弹窗取消
    btncancel1() {
      this.showdellog = false
    }
  }
}

</script>

<style>
 .SiteRent-container{
  margin: 0px 20px;

 }
.inputs{
    margin-right: 15px;
  }
  .tables{
    margin-top: 10px;
  }

</style>
